<template>
	<view>
		<view class="search-dis">
			<view class="search-tabs textColor">
				<view :class="['tabs-margin search-tabs_view',acTypes == 1 ? 'active-color' : '']" @tap="tapActive(1)">活动</view>
				<view :class="['search-tabs_view',acTypes == 2 ? 'active-color' : '']" @tap="tapActive(2)">赛事</view>
			</view>
			<u-input @input="searchTap"></u-input>
		</view>
		<view class="search-bottom">
			<view class="search-left">
				<view class="left-font" @tap.stop="pop(1)">
					<text class="textColor size26" v-show="acTypes == 1">{{acvId ? acvname : '活动类型'}}</text>
					<text class="textColor size26" v-show="acTypes == 2">{{acvId ? acvname : '赛事类型'}}</text>
					<i class="icon iconColor" :style="{transform:`rotate(${leitype == 1 ? deg : 0}deg)`}">&#xe649;</i>
				</view>
				<text class="left-xian"></text>
				<view class="left-font" @tap.stop="pop(2)">
					<text class="textColor size26" v-show="acTypes == 1">{{cityname ? cityname : '目的地'}}</text>
					<text class="textColor size26" v-show="acTypes == 2">{{cityname ? cityname : '城市'}}</text>
					<i class="icon iconColor" :style="{transform:`rotate(${leitype == 2 ? deg : 0}deg)`}">&#xe649;</i>
				</view>
			</view>
			<view v-if="acTypes == 1" class="iconView">
				<i v-if="acStyle == 1" class="icon iconColor icon-setting" @tap="typeTap(2)">&#xe615;</i>
				<i v-else class="icon iconColor icon-setting" @tap="typeTap(1)">&#xe61b;</i>
			</view>
			<view v-else class="iconView">
				<i v-if="maStyle == 1" class="icon iconColor icon-setting" @tap="typeTap(2)">&#xe615;</i>
				<i v-else class="icon iconColor icon-setting" @tap="typeTap(1)">&#xe61b;</i>
			</view>
		    <view class="unipop" :animation="animationData" :style="{top:phoHeight+'px'}">
		    	<view 
				   v-if="leitype == 1"
				   :class="['uni-p size26 textColor',acvId == item.id ? 'uni-active' : '']" 
				   v-for="(item,index) in allList" 
				   :key="index"
				   @tap="activeTap(1,item)">
					{{item.name}}
				</view>
				<view
				   v-if="leitype == 2"
				   :class="['uni-p size26 textColor',cityname === item ? 'uni-active' : '']" 
				   v-for="(item,index) in allList" 
				   :key="index"
				   @tap="activeTap(2,item)">
					{{item}}
				</view>
		    </view>
		</view>
		<view v-if="deg != 0" class="zhezhao" :style="{top:zheTop}" @tap.stop="overTap" @touchmove.stop.prevent="moveStop"></view>
	</view>
</template>

<script>
	import uInput from '../u-input/u-input.vue';
	import { mapMutations, mapActions, mapState } from 'vuex';
	export default {
		props:{
			type:{required: true},
			key_word:{required: true},
			tabsIndex:{required: true},
			activeId:{required: true},
			city:{required: true},
			activeInfo:{
				type:Object,
				default:()=>{
					return {};
				}
			}
		},
		components:{
			uInput
		},
		computed:{
			...mapState({
				acTypes: ({ active }) => active.acTypes,
				acStyle: ({ active }) => active.acStyle,
				maStyle: ({ active }) => active.maStyle
			}),
			acType(){
				const {active} = this.activeInfo;
				let data = active.classify;
				var flag = data.some(item=>{
					return item.id == 0;
				})
				if(!flag)data.unshift({id:0,name:'全部'})
				// data.unshift({id:0,name:'全部'})
				return data;
			},
			comType(){
				const {match} = this.activeInfo;
				let data = match.classify;
				var flag = data.some(item=>{
					return item.id == 0;
				})
				if(!flag)data.unshift({id:0,name:'全部'})
				// data.unshift({id:0,name:'全部'})
				return data;
			},
			desList(){
				const {active} = this.activeInfo;
				let data = active.city;
				var flag = data.some(item=>{
					return item == '全部';
				})
				if(!flag)data.unshift('全部');
				// console.log('de',data)
				// data.unshift('全部')
				return data;
			},
			venueList(){
				const {match} = this.activeInfo;
				let data = match.city;
				var flag = data.some(item=>{
					return item == '全部';
				})
				if(!flag)data.unshift('全部');
				// console.log('de',flag)
				// data.unshift('全部')
				return data;
			}
		},
		watch: {
		    typeline (newValue, oldvalue) {
		      this.$emit('update:type', newValue)
		    },
		    type (newValue) {
		      this.typeline = newValue
		    },
			tabsIndex(newValue){
				this.Index = newValue
			},
			Index(newValue, oldvalue){
				this.$emit('update:tabsIndex', newValue)
			},
			activeId(newValue){
				this.acvId = newValue
			},
			acvId(newValue, oldvalue){
				this.$emit('update:activeId', newValue);
			},
			city(newValue){
				this.cityname = newValue
			},
			cityname(newValue, oldvalue){
				this.$emit('update:city', newValue);
			},
			key_word(newValue){
				this.keyWord = newValue;
			},
			keyWord(newValue, oldvalue){
				this.$emit('update:key_word', newValue);
			}
		},
		data() {
			return {
				Index:0,
				typeline:this.type,
				animationData:{},
				linList:[],
				phoHeight:0,
				deg:0,
				leitype:1,
				zheTop:uni.upx2px(208),
				allList:[],
				acvId:0,
				cityname:"",
				acvname:'',
				keyWord:''
			};
		},
		mounted() {
			var animation = uni.createAnimation({
			  duration: 1000,
			  timingFunction: 'ease',
			})
			var px = uni.upx2px(86);
			this.animation = animation
			this.animation.top(-300).opacity(0).step({ duration: 0 })
			this.animationData = this.animation.export()
		},
		methods:{
			...mapMutations([
			    'acWatch',
				'acStylewa',
				'maStylewa'
			]),
			//选中
			async activeTap(e,item){
				switch(e){
					case 1:
					  this.acvId = item.id;
					  this.acvname = item.name;
					  break;
					case 2:
					  this.cityname = item;
					  break;
				}
				this.overTap()
			},
			moveStop(){},
			setData: function (obj) {
				let that = this;
				Object.keys(obj).forEach(function (key) {
					that.$set(that.$data, key, obj[key])
				});
			},
			
			//遮罩
			overTap(){
				this.deg = 0;
				this.animation.top(-300).step({ duration: 50 });
				this.animation.opacity(0).step({ duration: 200 });
				this.animationData = this.animation.export()
			},
			//下拉框数据
			pop(type){
				var px = uni.upx2px(84);
				const {tabsIndex,acType,comType,desList,venueList} = this;
				if(type == 1){
					this.allList = tabsIndex == 1 ? acType : comType;
				}else{
					this.allList = tabsIndex == 1 ? desList : venueList;
				}
				if(this.deg == 0){
					this.deg = 180;
					this.animation.top(px).step({ duration: 50 });
					this.animation.opacity(1).step({ duration: 200 });
					this.animationData = this.animation.export()
				}else if(this.deg == 180 && type != this.leitype){
					this.deg = 180;
					this.animation.top(px).step({ duration: 50 });
					this.animation.opacity(1).step({ duration: 200 });
					this.animationData = this.animation.export()
				}else if(this.deg == 180){
					this.deg = 0;
					this.animation.top(-300).step({ duration: 50 });
					this.animation.opacity(0).step({ duration: 200 });
					this.animationData = this.animation.export()
				}
				this.leitype = type;
			},
			typeTap(type){
				if(this.acTypes == 1){
					this.acStylewa(type);
				}else{
					this.maStylewa(type)
				}
				this.typeline = type;
			},
			searchTap(e){
				this.keyWord = e;
			},
			tapActive(type){
				this.acWatch(type);
				this.Index = type;
				this.acvId = 0;
				this.acvname = '';
				this.cityname = '';
				this.overTap()
				this.$emit('serSuccess');
				const {Index,acType,comType,desList,venueList,leitype} = this;
				if(leitype == 1){
					this.allList = Index == 1 ? acType : comType;
				}else{
					this.allList = Index == 1 ? desList : venueList;
				}
			}
		}
	}
</script>

<style lang="scss">
	.iconView{
		width:60upx;
		height: 60upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.search-dis{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30upx 24upx;
		box-sizing: border-box;
	}
	.search-tabs{
		width: 200upx;
		display:flex;
		align-items: center;
		justify-content:flex-start;
		.search-tabs_view{
			// width:100upx;
			height:72upx;
			text-align: left;
			font-size: 30upx;
			transition: all 0.3s;
			display: flex;
			align-items: flex-end;
		}
		.tabs-margin{
			margin-right: 30upx;
		}
		.active-color{
			text-align: center;
			font-size: 32upx;
			color: #BF3736;
			font-weight: bold;
			position: relative;
			z-index: 2;
			padding:0 10upx;
			&::before{
				content: "";
				display: block;
				position: absolute;
				width: 100%;
				height: 12upx;
				background-color: #F8EBEB;
				border-radius: 12upx;
				left: 0;
				bottom: 0;
				z-index: -1;
			}
		}
	}
	.search-bottom{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20upx 24upx;
		box-sizing: border-box;
		width: 100%;
		position: relative;
		.search-left{
			display: flex;
			align-items: center;
		}
		.left-xian{
			&::after{
				content: "";
				display: block;
				width: 2upx;
				height: 24upx;
				background-color:$them-icon-color;
				margin: 0 22upx;
			}
		}
		.icon-setting{
			font-size:40upx;
		}
		.left-font{
			display: flex;
			align-items: center;
			text{
				font-size:26upx;
			}
			.icon{
				font-size:35upx;
				margin-left:11upx;
				transition: all 0.3s;
			}
		}
		.unipop{
			position: absolute;
			width: 100%;
			left: 0;
			top: 0;
			padding:24upx;
			box-sizing: border-box;
			background-color: #FFFFFF;
			border-top: 2upx solid #eeeeee;
			z-index: 12;
			max-height:360upx;
			overflow-y: auto;
			display: flex;
			flex-wrap: wrap;
			.uni-p{
				padding:7upx 30upx;
				border-radius:10upx;
				box-sizing: border-box;
				// display: inline-block;
				margin-bottom: 15upx;
			}
			.uni-active{
                background: linear-gradient(-45deg, #BF3736, #D3504F);
				color: #FFFFFF;
			}
		}
	}
	.zhezhao{
		position: fixed;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,.4);
		left: 0;
		z-index:10;
	}
</style>
